<script setup lang="ts">
import { Toast } from "vant";
import { areaList } from '@vant/area-data';
import { ref,reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
const showArea = ref(false);
const result = ref('');

const checked = ref(false);
const user = reactive({
    name:'',
    phonenumber:'',
    area:'',
    addr:''
})

const searchResult = ref([]);

const finish =() =>{
    if(user.addr==''&&user.area==''&&user.name==''&&user.phonenumber==''){
        Toast.fail('有内容未填写完成')
    }else{
        router.push('/home')
    }
}

const skip = () => {
    router.push('/home')
};
const onChangeDetail = () => {
    searchResult.value = [];
};

// onMounted(()=>{
//     console.log(areaList);
//     return {areaList}
// })
</script>

<template>
    <div class="section">
        <div class="section1">收获地址</div>
        <div class="section2">
            <van-form>
                <van-cell-group inset>
                    <van-address-edit
                    :area-list="areaList"
                    show-delete
                    show-set-default
                    show-search-result
                    :search-result="searchResult"
                    @save="finish"
                    save-button-text="完成(2/2)"
                    @delete="skip"
                    delete-button-text="跳过"
                    @change-detail="onChangeDetail"
                    position="top" :style="{ height: '70%' }"
                    />
                </van-cell-group>
            </van-form>
        </div>
    </div>
</template>

<style scoped>
.section1{
    height: 55px;
    line-height: 85px;
    font-size: 20px;
    color: white;
    background-color: #C1AB96;
}
.section2{
    margin-top: 10%;
}
.section3{
    margin-top: 70%;
}
.section3 button{
    width: 80%;
    height: 40px;
    margin-left: 10%;
    margin-bottom: 5%;
    border-radius: 20px;
    font-size: 12px;
}
::v-deep .van-button--danger {
    background-color: #C1AB96;
    color: white;
    border: none;
}
::v-deep .van-button--default{
    color: #C1AB96;
    border: 1px solid #C1AB96;
}    
</style>